<template>
  <div class="page-container">
    <div v-show="!addShow">
      <!--工具栏-->
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters" :size="size">
          <el-row style="text-align: left;">
            <el-form-item>
              <el-select v-model="filters.settleType" placeholder="结算对象类型" style="width: 200px;">
                <el-option label="全部" value="0">全部</el-option>
                <el-option label="总部" value="1">总部</el-option>
                <el-option label="供应商" value="2">供应商</el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-input v-model="filters.settleName" placeholder="结算对象名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-select v-model="filters.payBillStatus" placeholder="付款单状态" style="width: 200px;">
                <el-option label="全部" value="0">全部</el-option>
                <el-option label="待审核" value="1">待审核</el-option>
                <el-option label="已审核待付款" value="2">已审核待付款</el-option>
                <el-option label="审核不通过" value="3">审核不通过</el-option>
                <el-option label="已付款" value="4">已付款</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filters.payBillId" placeholder="付款单编码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                v-model="filters.billStartDate"
                type="date"
                placeholder="制单开始时间">
              </el-date-picker>
              -
              <el-date-picker
                v-model="filters.billEndDate"
                type="date"
                placeholder="制单结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-select v-model="filters.tradeCurrency" placeholder="付款币别" style="width: 200px;">
                <el-option label="AUD" value="0">AUD</el-option>
                <el-option label="CNY" value="1">CNY</el-option>
                <el-option label="GBP" value="2">GBP</el-option>
                <el-option label="USD" value="3">USD</el-option>
              </el-select>
            </el-form-item>
          </el-row>


          <el-row style="text-align: left;">

            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                         @click="findPageMock"/>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset" type="primary" />
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary"
                         @click="handleAdd"/>
            </el-form-item>


          </el-row>

        </el-form>
      </div>
      <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
        <el-form :inline="true" :size="size">
          <el-form-item>
            <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPageMock"></el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
              </el-tooltip>
            </el-button-group>
          </el-form-item>
        </el-form>
        <!--表格显示列界面-->
        <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                    @handleFilterColumns="handleFilterColumns">
        </table-column-filter-dialog>
      </div>
      <!--表格内容栏-->
      <cy-table :height="350"
                :data="pageResult" :columns="detailColumns"
                @findPage="findPageMock" ref="CyTable"
                :showBatchDelete="false" :showDeleteOperation=true :showEditOperation=true
                :showDetailOperation=true :showSelection="false"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleDetail="handleDetail">
      </cy-table>

      <!--新增编辑界面-->
      <el-dialog
        :title="'审核'"
        width="40%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
      >
        <el-form
          :model="dataForm"
          label-width="80px"
          :rules="dataFormRules"
          ref="dataForm"
          :size="size"
          label-position="right"
        >
          <p style="text-align:center">请审核 {{pageResultDetail.rows[0].payFormId}} 该单子</p>
          <el-form-item>
            <el-row>
              <el-button style="width: 200px" type="primary" @click="handleClose">审核通过</el-button>
              <el-button style="width: 200px" type="primary" @click="handleClose">审核不通过</el-button>
            </el-row>
          </el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="备注"
            v-model="textarea">
          </el-input>
        </el-form>
      </el-dialog>

      <el-dialog title="选择结算对象类型" :visible.sync="addDialogVisible" width="40%"
                 style="align-content: center">
        <el-form :model="dataForm" :rules="rules" ref="dataForm">
          <el-form-item label="结算类型" prop="region">
            <el-select v-model="dataForm.region" placeholder="结算对象类型">
              <el-option label="总部" value="1"></el-option>
              <el-option label="供应商" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算币别" prop="tradeCurrency" style="padding-top:10px;">
            <el-select v-model="dataForm.tradeCurrency" placeholder="结算币别">
              <el-option label="AUD" value="0">AUD</el-option>
              <el-option label="CNY" value="1">CNY</el-option>
              <el-option label="GBP" value="2">GBP</el-option>
              <el-option label="USD" value="3">USD</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nextStep">下一步</el-button>
          <el-button @click="addDialogVisible = false">返回</el-button>
        </div>
      </el-dialog>

      <!--详情界面-->
      <el-dialog
        :title="'付款录入'"
        width="40%"
        :visible.sync="detailDialogVisible"
        :close-on-click-modal="false"
      >
        <el-form :model="ruleForm" :rules="dataFormRules" ref="ruleForm" style="width: 500px;"
                 label-width="100px" class="demo-ruleForm">
          <el-form-item label="付款方式" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="账户类型" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="银行转账" value="0">银行转账</el-option>
              <el-option label="支付宝转账" value="1">支付宝转账</el-option>
              <el-option label="微信转账" value="2">微信转账</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款账号" prop="desc">
            <el-input v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="付款凭证号" prop="resource">
            <el-input v-model="ruleForm.resource"></el-input>
          </el-form-item>
          <el-form-item label="实际付款日">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="付款单编码" prop="name">
            <el-input v-model="pageResultDetail.rows[0].payFormId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="付款币别" prop="name">
            <el-input v-model="pageResultDetail.rows[0].payCurrency" :disabled="true"></el-input>
          </el-form-item>
          <el-from-item>
            <p style="text-align:center">确认{{pageResultDetail.rows[0].offlinePayAmount}}元已和供应商
              完成线下支付？</p>
          </el-from-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click.native="detailDialogVisible = false">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


      <!--新增-->
      <el-dialog
        :title="'选择商家'"
        width="40%"
        :visible.sync="merchantVisible"
        :close-on-click-modal="false"
      >
        <el-form
          :model="dataForm"
          :rules="dataFormRules"
          ref="dataForm"
          :size="size"
          label-position="right"
        >
          <el-row>
            <el-form-item lable="供应商编码" prop="merchant_code"
                          style="float:left;padding-top:10px;padding-left:15px;">
              <el-input v-model="filtersCyTable1.supplierId" placeholder="供应商编码"></el-input>
            </el-form-item>
            <el-form-item lable="供应商名称" prop="merchant_name"
                          style="float:left;padding-top:10px;padding-left:15px;">
              <el-input v-model="filtersCyTable1.supplierName" placeholder="供应商名称"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')" style="float:right;"
                         @click="resetCyTable1"
                         type="primary"/>
              <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                         style="float:right;"
                         @click="resetCyTable1"/>
            </el-form-item>
          </el-row>
          <!--表格内容栏-->
          <cy-table1 :height="1000"
                     :data="pageResult" :columns="clickColumns"
                     @findPage="clinkMock" ref="CyTable1"
                     :showBatchDelete="false" :showDeleteOperation=false
                     :showEditOperation=false
                     :showDetailOperation=false :showOperation="false">
          </cy-table1>
          <el-row></el-row>
          <el-row>
            <el-form-item>
              <kt-button :label="'下一步'" style="float:right;padding-top:10px;padding-left:15px;"
                         @click="nextStepMerchant"
                         type="primary"/>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
    <div v-show="addShow">
      <addSettleBill @cancelClick="cancelClick"></addSettleBill>
    </div>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import CyTable1 from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"
  import addSettleBill from "@/views/Paje/addSettleBill";

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      CyTable1,
      KtButton,
      TableColumnFilterDialog,
      addSettleBill
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          name: '',
          preparedStartTime: '',
          preparedEndTime: ''
        },
        filtersCyTable1: {},
        addShow: false,
        textarea: '',
        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          {prop: "payFormId", label: "付款单号", minWidth: 120},
          {prop: "settleName", label: "结算对象名称", minWidth: 120},
          {prop: "settleId", label: "结算对象编码", minWidth: 120},
          {prop: "settleType", label: "结算对象类型", minWidth: 120},
          {prop: "payAccount", label: "付款帐号", minWidth: 120},
          {prop: "payMode", label: "付款方式", minWidth: 120},
          {prop: "payAccountType", label: "付款方账户类型", minWidth: 120},
          {prop: "applyPayAmount", label: "申请付款金额", minWidth: 120},
          {prop: "offlinePayAmount", label: "线下付款金额", minWidth: 120},
          {prop: "offsetPrePayAmount", label: "冲抵预付款金额", minWidth: 120},
          {prop: "payFormStatus", label: "付款单状态", minWidth: 120},
          {prop: "payCurrency", label: "付款币别", minWidth: 120},
          {prop: "exchangeRate", label: "汇率", minWidth: 120},
          {prop: "payCertificateNum", label: "付款凭证号", minWidth: 120},
          {prop: "remake", label: "备注信息", minWidth: 120},
          {prop: "preparer", label: "制单人", minWidth: 120},
          {prop: "preparerTime", label: "制单时间", minWidth: 120},
        ],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        pageResultDetail: {
          "rows":
            [{
              "payFormId": "1912060005213449",
              "settleType": "供应商",
              "settleId": "1911290006866570",
              "settleName": "对账美元代销供应商",
              "payFormStatus": "已付款",
              "payCurrency": "CNY",
              "exchangeRate": "0.1423",
              "applyPayAmount": "47.35",
              "offsetPrePayAmount": "0.00",
              "offlinePayAmount": "47.35",
              "remake": "",
              "payMode": "线下打款",
              "payAccountType": "支付宝",
              "payAccount": "12312312",
              "payCertificateNum": "",
              "preparer": "merchant",
              "preparerTime": "2019-12-06 10:40:53"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },
        dialogImageUrl: '',

        clickColumns: [
          {prop: "supplierName", label: "供应商名称", minWidth: 120},
          {prop: "supplierId", label: "供应商编码", minWidth: 120},
        ],
        clickDetail: {
          "rows":
            [{
              "supplierId": "1945233321",
              "supplierName": "对账人民币经销供应商"
            },
              {
                "supplierId": "1911290006873624",
                "supplierName": "对账美元经销供应商"
              }],
          "total": 2,
          "code": "0000"
        },

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        detailDialogVisible: false,
        addDialogVisible: false,
        merchantVisible: false,//商户页面是否显示
        dataForm: {
          region: '',
          tradeCurrency: ''
        },
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dataFormRules: {},
        rules: {
          data1: [
            {required: true, message: '选择一个日期', trigger: 'blur'}
          ],
          tradeCurrency: [
            {required: true, message: '请至少选择一个结算币别', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      cancelClick(){
        this.addShow  = !this.addShow;
      },
      // 获取分页数据
      findPage: function (data) {
        this.filters.t = 'payApplyForm'
        this.$refs.CyTable.findPage(this.filters)
      },
      //mock数据
      findPageMock: function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },
      clinkMock: function () {
        this.$refs.CyTable1.findPageMock(this.clickDetail)
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'payApplyForm'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.dialogVisible = false;
        this.$refs.dataForm.resetFields()
        this.textarea = '';
      },
      // 显示编辑界面
      handleEdit: function (params) {
        console.log(params);
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'payApplyForm'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "付款申请单"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.addDialogVisible = true
        this.operation = true
        this.dataForm.id = "";
        //this.dataForm={};
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm.document_license = "";
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
        this.findPageMock()
      },

      resetCyTable1: function () {
        this.filtersCyTable1 = {};
        this.clinkMock()
      },

      operationClick: function () {
        var this_ = this;
        this_.merchantVisible = false;
      },

      // 显示编辑界面
      handleDetail: function (params) {
        console.log(params)
        this.detailDialogVisible = true
        this.operation = false
        var this_ = this;
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params.row);
        });
      },
      // 编辑
      submitForm: function () {
        this.detailDialogVisible = false;
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              params.t = 'payApplyForm';
              this.$message({message: '操作成功', type: 'success'})
              // this.utils.request.editUserInfo(params, this.editInfoBack)
            })
          }
        })
      },
      // 新增修改回调
      editInfoBack: function (data) {
        this.$message({message: '操作成功', type: 'success'})
        // if (data.code == '0000') {
        //   this.$message({message: '操作成功', type: 'success'})
        // } else {
        //   this.$message({message: '操作失败', type: 'error'})
        // }
        this.findPage();
        this.dialogVisible = false
        this.operation = false
        this.editLoading = false
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = []
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },

      // 批量审核通过
      batchReviewSuccess: function () {
        this.$refs.CyTable.batchOperationMock("审核通过");
      },

      batchAutoRefund: function () {
        this.$refs.CyTable.batchOperationMock("退款成功");
      },

      addMock: function (dataForm) {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
            })
          }
        })
      },

      // 下一步
      nextStep: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            var this_ = this;
            this_.addDialogVisible = false;
            //只有选择供应商的时候才会弹出选择供应商页面
            if (this_.dataForm.region == '2') {
              this_.merchantVisible = true;
            } else {
              this_.jumpPage();
            }
          }
        });
      },
      // 下一步(供应商)
      nextStepMerchant: function () {
        var this_ = this;
        this_.merchantVisible = false;
        this_.jumpPage();
      },
      //跳转新页
      jumpPage: function () {
        this.addShow = true;
      },

    },
    mounted() {
      this.findPageMock()
      this.initColumns()
    }

  }
</script>
